<!-- 分页列表模板 -->
<template>
    <PageTable ref="pageTableRef" :headers="tableHeaders" allow-search :search-form="searchForm"
        :loadCallable="loadCallable" :btns="btns">
    </PageTable>


    <!-- BEGIN 新增弹框 -->
    <el-dialog v-model="addGroupForm.showDialog" :draggable="true" header="新增">
        <el-form ref="addGroupFormRef" :model="addGroupForm.formData" :rules="addGroupForm.rules" label-width="auto">

            <el-form-item label="图组名称" prop="name">
                <el-input v-model="addGroupForm.formData.name" name="name"></el-input>
            </el-form-item>

            <el-form-item label="图组标识" prop="code">
                <el-input v-model="addGroupForm.formData.code" name="code"></el-input>
            </el-form-item>

            <el-form-item label="备注(仅后台可见)" prop="remark">
                <el-input type="textarea" v-model="addGroupForm.formData.remark" name="remark"></el-input>
            </el-form-item>

            <el-button :loading="addGroupForm.onSubmiting" type="primary" @click="onAddSubmit(addGroupFormRef)">提交</el-button>
        </el-form>
    </el-dialog>
    <!-- END 新增弹框  -->

    <!-- BEGIN 编辑弹框 -->
    <el-dialog v-model="editAdGroupForm.showDialog" :draggable="true" header="编辑">
        <el-form ref="editAdGroupFormRef" :model="editAdGroupForm.formData" label-width="auto">
            <el-input v-model="editAdGroupForm.formData.id" type="hidden"></el-input>

            <el-form-item label="图组名称" prop="name">
                <el-input v-model="editAdGroupForm.formData.name" name="name"></el-input>
            </el-form-item>

            <el-form-item label="图组标识" prop="code">
                <el-input v-model="editAdGroupForm.formData.code" name="code"></el-input>
            </el-form-item>

            <el-form-item label="备注(仅后台可见)" prop="remark">
                <el-input type="textarea" v-model="editAdGroupForm.formData.remark" name="remark"></el-input>
            </el-form-item>

            <el-button :loading="editAdGroupForm.onSubmiting"  type="primary" @click="onEditSubmit(editAdGroupFormRef)">提交</el-button>
        </el-form>
    </el-dialog>
    <!-- END 编辑弹框  -->

</template>

<script setup>
import PageTable from '@/components/PageTable.vue';
import { ref } from 'vue';
import msgUtil from '@/utils/msgUtil'

import { useRouter } from 'vue-router';

import str from '@/utils/str'
import arr from '@/utils/arr'

import adApi from '@/api/ad';

const Router = useRouter();

// pagetable的引用
const pageTableRef = ref();

// 表格列设置,如果需要动态设置则用 ref包裹
const tableHeaders = [
    {
        prop: 'id',
        label: 'ID',
        width: 50
    },
    {
        prop: 'name',
        label: '图组名称',
        
    },
    {
        prop: 'code',
        label: '唯一标识',
        
    }
]

// 搜索表单
const searchForm = ref({
    formItems: [
        {
            name: 's_name',
            type: 'text',
            placeholder: '分组名称',
        },
        {
            name: 's_code',
            type: 'text',
            placeholder: '分组标识',
        },
    ]
})

// 加载数据的接口 Promise
const loadCallable = adApi.groupPageList;

// 表格顶部区域的按钮
const btns = {
    // 删除选中按钮
    deleteAll: {
        text: '删除选中',
        click(ids) {
            adApi.delGroup(ids).then(res => {
                msgUtil.handleApiRes(res, {
                    onApiSuccess() {
                        pageTableRef.value.initPageData();
                    }
                });
            })
        }
    },
    add: {
        text: '新增',
        click() {
            initAddGroupFormData();
            addGroupForm.value.showDialog = true;
        }
    },
    // tableHeaderBtns: [
    //     {
    //         type: 'warning',
    //         text: '刷新缓存',
    //         click() {
    //             // todo

    //         }
    //     }
    // ],
    rowBtns: [{
        text: '编辑',
        click(rows, idx) {
            editAdGroupForm.value.formData = rows;
            editAdGroupForm.value.showDialog = true;
        },
    },{
        text: '图片管理',
        click(rows, idx) {
            Router.push({
                path : '/content/ad',
                query : {
                    groupId : rows.id
                }
            })
        },
    },]
};

// 新增表单引用
const addGroupFormRef = ref()

// 初始化新增表单
function initAddGroupFormData(){
    addGroupForm.value.formData = {
        code : '',
        name : '',
        remark : ''
    }
}

// 新增表单数据
const addGroupForm = ref({
    showDialog : false,
    onSubmiting: false,
    rules : {
        name : [{required:true,message:'必填',type:'string'}],
        code : [{required:true,message:'必填',type:'string'}],
        remark : [{message:'任意文字',type:'string'}],
    },
    formData : {
        name : ''
    }
})

// 新增提交
function onAddSubmit(formEl){
    formEl.validate((valid, fields) => {
        if (!valid) {
            return;
        }
        if (addGroupForm.value.onSubmiting) {
            return;
        }
        addGroupForm.value.onSubmiting = true;
        adApi.addGroup(addGroupForm.value.formData)
            .then(res => {
                msgUtil.handleApiRes(res, {
                    onApiSuccess() {
                        addGroupForm.value.showDialog = false
                        pageTableRef.value.initPageData();
                    }
                })
            })
            .finally(() => {
                addGroupForm.value.onSubmiting = false;
            })
    })
}


// 编辑更新
const editAdGroupFormRef = ref();

// 编辑表单
const editAdGroupForm = ref({
    showDialog : false,
    onSubmiting: false,
    rules : {
        name : [{required:true,message:'必填',type:'string'}],
        code : [{required:true,message:'必填',type:'string'}],
        remark : [{message:'任意文字',type:'string'}],
    },
    formData : {
        id : 0,
        name : ''
    }
})

// 编辑提交

function onEditSubmit(formEl){
    formEl.validate((valid, fields) => {
        if (!valid) {
            return;
        }
        if (editAdGroupForm.value.onSubmiting) {
            return;
        }
        editAdGroupForm.value.onSubmiting = true;
        adApi.updateGroup(editAdGroupForm.value.formData)
            .then(res => {
                msgUtil.handleApiRes(res, {
                    onApiSuccess() {
                        editAdGroupForm.value.showDialog = false
                        pageTableRef.value.initPageData();
                    }
                })
            })
            .finally(() => {
                editAdGroupForm.value.onSubmiting = false;
            })
    })
}

</script>